<!--
  【参数配置】通用页面， 可以被三个系统引入。 可以是web(抽屉展示)， 也可以是H5形式。 

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/02 18:35
-->

<template>
  <!-- 引入具体的接口组件  -->
  <component :is="vdata.currentComponent" ref="ifCodeAppConfigComponentRef" />
</template>

<script lang="ts" setup>
import {ref, reactive, getCurrentInstance, computed, inject, provide, nextTick } from 'vue'
import { API_URL_MCH_APPLYMENT_LIST, req } from '@/api/manage'
import storage from '@/utils/jeepayStorageWrapper'
import { getOriginIfCode } from '../util/jeepayComponentUtil.js'

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const ifCodeAppConfigComponentRef = ref()

const vdata : any = reactive({

  applyId: null, // 进件ID
  applyRecord: { }, // 进件属性

  currentComponent: null,  // 动态组件
  
})

// 向所有子组件注入： 进件详细具体数据
provide('applyRecord', computed( ()=> vdata.applyRecord) )


// 接收父组件的参数注入： 配置方式 (判断是 运营平台  代理商 还是商户 )
let configMode : any = inject('configMode')

// 页面渲染函数
function pageRender(applyId){


  // 打印 访问地址 
  let jeepayToken = storage.getToken()
  let url = `${window.location.origin}/h5MchApplymentOption?jeepayToken=${jeepayToken}&applyId=${applyId}&configPage=APP_CONFIG`
  console.log(url)

  vdata.applyId = applyId
  req.getById(API_URL_MCH_APPLYMENT_LIST, applyId).then((res) => { // 查询信息
    vdata.applyRecord = res

    // ifCode格式： ifCode或ifCode_1等等，保存数据使用传入的ifCode或ifCode_1，页面渲染使用ifCode(需截取ifCode_1)
    const ifCodeView = getOriginIfCode(vdata.applyRecord.ifCode)

    // 根据支付接口名称  动态引入组件 
    import(`./diy/${ifCodeView}/AppConfig.vue`).then((module) => {
      vdata.currentComponent = module.default

      // 调用渠道自定义的 pageRender函数， 此时已经注入了全部进件详细信息。 
      nextTick(() => ifCodeAppConfigComponentRef.value.pageRender(applyId))
      
    }).catch(() => {
      $infoBox.message.error('当前渠道不支持参数配置！ ')
    })
  })
}

defineExpose({ pageRender })
</script>
